<template>
  <modal ref="modal_1"
         :title="title"
         :isCloseConfirm="false"
         top="3%"
         width="60%"
         height="50%"
         :close-on-click-modal="false"
         @modalOpened="opened"
         @modalClose="close"
         @handleFullScreen="handleFullScreen">
    <!--<basic-container>-->
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               v-model:page="page"
               v-model:search="search"
               :permission="permissionList"
               v-model="form"
               ref="crud"
               @sort-change="sortChange"

               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               >
    </avue-crud>
      <template #footerButton>
        <el-button type="primary" icon="el-icon-plus"  @click="handleSubmit">确定</el-button>
        <!--<el-button type="primary" icon="el-icon-circle-check"  @click="clearSelection">清空-->
        <!--</el-button>-->
        <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">关闭</el-button>
      </template>
    <!--</basic-container>-->
  </modal>
</template>

<script>
  import {getList} from "@/api/anwise/logistics/asn_main";
  import {mapGetters} from "vuex";

  export default {
    props: {
      notificationType: String,
    },
    data() {
      return {
          emits: ["delAsnList"],
          title:"选择要删除的ASN",
          customerNo:'',
          bankId:"",
        form: {},
        query: {},
        loading: true,
          dateFormat: 'YYYY-MM-DD',
          pickerOptions: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
          search:{},
        selectionList: [],
          arrayList:[],
        option: {
          height:'auto',
          calcHeight: 30,
            tip: false,
            searchShow: false,
            searchMenuSpan: 6,
            border: true,
            index: true,
            rowKey: 'id',
            selection: true,
            reserveSelection:true,
            searchLabelWidth:80,
            searchSpan:8,
            labelWidth: 150,
            menuWidth: 120,
            indexWidth:100,
            menu:false,
            addBtn: false,
            editBtn: false,
            viewBtn: false,
            delBtn: false,
            stripe: true,
            searchShowBtn:false,
            searchIndex: 3,
            searchIcon: false,
          searchEnter:true,
            searchBtn:false,
            refreshBtn:false,
            selectable:(row,index)=>{
                return !this.arrayList.some((val) =>(val.asnNo === row.asnNo))
            },
          column: [
              {
                  label: "ASN编号",
                  prop: "asnNo",
                  type: "input",
                  fixed: true,
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:140,
                  rules: [{
                      required: true,
                      message: "请输入ASN编号",
                      trigger: "blur"
                  }],
              },
              {
                  label: "客户账号",
                  prop: "customerNo",
                  type: "number",
                  min: 0,
                  controls:false,
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
                  rules: [{
                      required: true,
                      message: "请输入客户账号",
                      trigger: "blur"
                  }],
              },
              {
                  label: "客户名称",
                  prop: "customerName",
                  type: "input",
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "收货工厂",
                  prop: "factoryName",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:120,
                  rules: [{
                      required: true,
                      message: "请输入收货工厂",
                      trigger: "blur"
                  }],
              },
              {
                  label: "送货地址",
                  prop: "deliAddress",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:120,
                  rules: [{
                      required: true,
                      message: "请输入送货地址",
                      trigger: "blur"
                  }],
              },
              {
                  label: "送货日期",
                  prop: "asnDate",
                  type: "date",
                  valueFormat: 'YYYY-MM-DD',
                  format:'YYYY-MM-DD',
                  search: true,
                  overHidden: true,
                  sortable: true,
                  width:140,
                  rules: [{
                      required: true,
                      message: "请输入送货日期",
                      trigger: "blur"
                  }],
              },
            {
              label: "总箱数",
              prop: "totalCtnNum",
              type: "input",
              overHidden: true,
              sortable: true,
              width:120,
            },
              // {
              //     label: "是否已使用",
              //     prop: "isUsed",
              //     type: "select",
              //     dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
              //     filterable: true,
              //     overHidden: true,
              //     sortable: true,
              //     search:true,
              //     width:150,
              //     props: {
              //         label: 'dictValue',
              //         value: 'dictKey',
              //     },
              //     dataType: 'string',
              //     rules: [{
              //         required: true,
              //         message: "请输入是否已使用",
              //         trigger: "blur"
              //     }],
              // },
              // {
              //     label: "ASN状态",
              //     prop: "asnStatus",
              //     type: "select",
              //     dicUrl: "/blade-system/dict-biz/dictionary?code=asn_status",
              //     filterable: true,
              //     overHidden: true,
              //     sortable: true,
              //     search:true,
              //     width:150,
              //     props: {
              //         label: 'dictValue',
              //         value: 'dictKey',
              //     },
              //     dataType: 'string',
              //     rules: [{
              //         required: true,
              //         message: "请输入审批状态",
              //         trigger: "blur"
              //     }],
              // },
              {
                  label: "审核人",
                  prop: "assignUser",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:120,
              },
              {
                  label: "审核日期",
                  prop: "assignDate",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:135,
              },
              {
                  label: "创建人姓名",
                  prop: "createUserName",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:150,
              },
              {
                  label: "创建时间",
                  prop: "createTime",
                  type: "input",
                  overHidden: true,
                  sortable: true,
                  width:135,
              },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
        selectionLoad() {
            let arr = [];
            // this.$refs.crud.toggleSelection();
            // console.log(this.selectionList);
            // if (this.selectionList && this.selectionList != null
            //     && this.selectionList.length > 0) {
            //     this.data.forEach(row => {
            //         if(this.selectionList.some((val) => val.asnNo === row.asnNo)) {
            //             console.log("row.id1+"+row.id)
            //             arr.push(row);
            //         }
            //     })
            // } else {
              console.log("arrayList",this.arrayList);
                if (this.arrayList) {
                    this.data.forEach(row => {
                        if(this.arrayList.some((val) => val.asnNo === row.asnNo )) {
                            console.log("row.id2+"+row.id)
                            arr.push(row);
                        }
                    })

                }
            // }
            this.$nextTick(() => {
                arr.forEach(item => {
                    // this.$refs.crud.clearSelection();
                    console.log("check"+item.id)
                    this.$refs.crud.toggleRowSelection(item, true);
                })
            })
        },
        showSelect(list) {
          this.data = list;
            this.loading = false;
          console.log("%%%%5")
          console.log(this.data);
          this.selectionList = [];
          this.$refs.modal_1.show();
          // this.onLoad(this.page);
        },
        clearData() {
            this.data = [];
            this.page.currentPage = 1;
        },
        clearSelection() {
            this.selectionList = [];
            this.arrayList = [];
            this.$refs.crud.toggleSelection();
        },
        /** 双击选中*/
        // dblclick(row) {
        //     console.log(this.selectionList);
        //     if (this.selectionList.length===0){
        //         this.$refs.crud.toggleRowSelection(row,true);
        //     }else {
        //         this.selectionList.forEach((item)=>{
        //             if (item.$index===row.$index){
        //                 this.$refs.crud.toggleRowSelection(row,false);
        //             }else {
        //                 this.$refs.crud.toggleRowSelection(row,true);
        //             }
        //         });
        //     }
        // },
        /**
         * 提交成功之后
         */
        submitAfter() {
            this.$refs.modal_1.hide()
        },
        handleSubmit() {
            console.log("setBankList")
            console.log(this.selectionList)
            this.$refs.modal_1.hide();
            this.$emit("delAsnList",this.selectionList);

            // if (this.isAdd) {
            //   this.$refs.modal_1.handleClose()
            //   // this.$emit("success", this.selectionList);
            // } else if (this.isListAdd) {
            //
            //   // this.$emit("success", this.versionId, this.selectionList);
            // }
        },
        sortChange(val) {
            console.log(val)
            this.sort = {
                prop: val.prop,
                order: val.order
            };
            let order = "";
            if (this.sort.prop && this.sort.order) {
                if (this.sort.order === "descending") {
                    order = `${this.sort.prop} desc`
                } else {
                    order = `${this.sort.prop} asc`
                }
            }
            this.query.orderBy = order;
            this.onLoad(this.page);
        },

        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            console.log(params);
            this.query = params;
            this.page.currentPage = 1
            this.onLoad(this.page, params);
            done();
        },



        opened() {
          //  this.onLoad(this.page);
        },
        close() {
            this.clearData();
            this.clearSelection();
        },


      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
      onLoad(page, params = {}) {
        this.loading = true;
        params.isUsed = '否';
        params.asnStatus = 'Confirmed';
          getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.loading = false;
            this.selectionLoad();
          });

      },
        handleDatePickerChange(value) {
            console.log(this.search);
        },
        handleFullScreen() {
            // console.log("this.option.height",this.$refs.crud)
            // if (this.$refs.crud.config.width == '100%') {
            //     this.option.height = '400px';
            //     this.$refs.crud.config.width ='400px';
            //     this.$refs.crud.refreshTable();
            //     this.$refs.crud.init();
            // } else {
            //     this.option.height = 'auto';
            //     this.$refs.crud.config.width ='100%';
            //     this.$refs.crud.refreshTable();
            //     this.$refs.crud.init();
            // }

        }
    }
  };
</script>

<style>
  ::v-deep .el-table__row {
    height: 30px !important;
  }
  ::v-deep  .el-table__cell{
    padding:  5px !important;
  }

</style>
